<template>
	<cl-page background-color="transparent" :fullscreen="true" :statusBar="false">
		<view class="page-login animate__animated animate__fadeIn">
			<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
			<image src="/static/images/close.png" mode="aspectFill" class="close" @click="router.back()"></image>
			<cl-form ref="Form" v-model="form" :rules="rules" label-width="150rpx">
				<cl-form-item :label="t('login.account')" prop="phone">
					<cl-input v-model="form.phone" maxlength="11" :border="false" :placeholder="t('login.account_p')"
						placeholder-class="placeholder"></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('login.password')" prop="password">
					<cl-input type="password" v-model="form.password" :border="false"
						:placeholder="t('login.password_p')" placeholder-class="placeholder"></cl-input>
				</cl-form-item>
			</cl-form>
			<view class="forget">{{ $t("login.forget") }}</view>
			<button class="login" @click="submit" :loading="btnLoading">{{ $t("login.login") }}</button>
			<button class="register" @click="router.push('/pages/login/register')">
				{{ $t("login.register_") }}
			</button>
			<button class="register audio flex flex-center" @click="router.push('/pages/user/soundLock/add')">
				<!-- <image src="/static/images/lock.png" mode="aspectFill" class="icon"></image> -->
				{{ $t("login.audio") }}
			</button>
			<view class="other">
				<view class="text"> {{ $t("login.other") }} </view>
			</view>
			<view class="flex flex-center mt70 pb50">
				<view class="flex flex-column flex-center font24 aaa">
					<image src="/static/images/weibo.png" mode="aspectFill" class="icon w50 h50 mb10"></image>
					{{ $t("login.wb") }}
				</view>
				<view class="flex flex-column flex-center font24 aaa" style="margin: 0 100rpx">
					<image src="/static/images/qq.png" mode="aspectFill" class="icon w50 h50 mb10"></image>
					{{ $t("login.qq") }}
				</view>
				<view class="flex flex-column flex-center font24 aaa">
					<image src="/static/images/wechat.png" mode="aspectFill" class="icon w50 h50 mb10"></image>
					{{ $t("login.wx") }}
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { user } = useStore();
const app = useApp();
const ui = useUi();
const Form = ref<ClForm.Ref>();
const btnLoading = ref(false);
const form = reactive<any>({
	phone: "",
	password: "",
});

const rules = reactive<any>({
	phone: [{
		required: true,
		message: t("login.account_p"),

	}, { pattern: /^1[3-9]\d{9}$/, message: t("login.phone_p_"), trigger: 'blur' }],
	password: {
		required: true,
		message: t("login.password_p"),
	},
});

const submit = () => {
	Form.value?.validate(async (valid, errors) => {
		if (valid) {
			btnLoading.value = true;
			try {
				const data = await service.api.login(form);
				user.setToken(data.result);
				user.set(data.result)
				ui.showToast(data.result.msg);
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/index/home",
					});
				}, 1000);
			} catch (error) {
				ui.showToast(error.message);
			}
			btnLoading.value = false;
		}
	});
};
</script>

<style lang="scss" scoped>
.page-login {
	position: relative;
	height: 100vh;
	box-sizing: border-box;
	padding: 281rpx 30rpx 0;

	.logo {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto 130rpx;
		display: block;
	}

	.close {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: 110rpx;
		right: 30rpx;
	}

	.forget {
		text-align: right;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0c81f7;
		margin-top: 40rpx;
	}

	.login {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 10rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
		margin-top: 53rpx;
	}

	.register {
		width: 100%;
		height: 88rpx;
		border-radius: 10rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #0c81f7;
		line-height: 88rpx;
		background: #ffffff;
		border: 2px solid #0c81f7;
		margin-top: 30rpx;
	}

	.audio {
		background: linear-gradient(0deg, #f6f6f6 0%, #ffffff 100%);

		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
		}
	}

	.other {
		width: 100%;
		height: 2rpx;
		background: #e5e5e5;
		position: relative;
		margin-top: 190rpx;

		.text {
			width: 230rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			background-color: #fff;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			top: -20rpx;
		}
	}
}
</style>
